<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        .kill {
            position: fixed;
            left: 0;
            bottom: 0;
            padding: 10px;
            box-sizing: border-box;
        }

        .handle {
            padding: 5px 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            margin: 5px 0;
            cursor: pointer;
            text-align: center;
        }
        textarea{
            font-size: 20px;
        }

    </style>
</head>
<body>
<a class="bili-video-card__info--owner" href="//space.bilibili.com/389640553" target="_blank">
    <span class="bili-video-card__info--author" title="狗友唠嗑">狗友唠嗑</span>
    <span class="bili-video-card__info--date">· 1-26</span>
</a>

<div class="kill">
        <div class="update handle">获取最新</div>
        <textarea id="keyword" rows="5" placeholder="输入屏蔽条件">name=231</textarea>
        <div class="commit handle">提交</div>
</div>
<script>
/*
* 区别使用和管理，分开维护，因此客户端只需要选择一个或者多个使用规则，默认黑名单为通用检索。
* 白名单设置
* 选择使用规则
* 1、开放特定的客户端，可以进行网络规则的维护，本地可以选择使用并更新该规则信息
* */

/*
* V1.0
* 1、自动拉取过滤规则
* 2、提交过滤规则
* */

let keyword = []
function check(){

    let checklist = [...document.querySelectorAll('.bili-video-card__info--author')]
    checklist.forEach(d=>{
        if(keyword.includes(d.title)){
            d.style.color = 'red'
        }
    })
    requestAnimationFrame(check)
}
check()


document.querySelector('.update').addEventListener('click', () => {
    fetch('http://localhost:3000/api/keywords').then(response => response.json())
    .then(data => {
        console.log('获取到的关键词:', data.keywords);
        // 将关键词存储到 Chrome 的本地存储中
        // chrome.storage.sync.set({ keywords: data.keywords }, () => {
        //     alert('关键词更新成功！');
        // });
        keyword = data.keywords
    })
    .catch(error => {
        console.error('获取关键词失败:', error);
        alert('关键词更新失败：' + error.message);
    });
});

document.querySelector('.commit').addEventListener('click', () => {
    let data = document.querySelector("#keyword").value
    keyword.push(data)
    fetch('http://localhost:3000/api/keywords',{
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            keyword:data ,
        })
    }).then(response => response.json()).then(data => {
        console.log('提交关键词:', data);
        // 将关键词存储到 Chrome 的本地存储中
        // chrome.storage.sync.set({ keywords: data.keywords }, () => {
        //     alert('关键词更新成功！');
        // });
    })
    .catch(error => {
        console.error('获取关键词失败:', error);
        alert('关键词更新失败：' + error.message);
    });
});
</script>
</body>
</html>
